<html>
  <head>
    <script type="text/javascript" src="http://mrdoob.github.com/three.js/build/Three.js"></script>
    <script type="text/javascript" src="http://mrdoob.github.com/three.js/examples/js/RequestAnimationFrame.js"></script>
    <script type="text/javascript" src="http://mrdoob.github.com/three.js/examples/js/Stats.js"></script>
    <script type="text/javascript" src="http://mrdoob.github.com/three.js/examples/js/Tween.js"></script>
    <style type="text/css">
     body { background-color: #000; padding: 0; margin: 0; }
    </style>
  </head>
  <body>
  <script type="text/javascript">
      var container, stats;
      var camera, scene, renderer, particle;
      var mouseX = 0, mouseY = 0;
      var press = false;
      var centerx = window.innerWidth / 2;
      var centery = window.innerHeight / 2;

      init();
      animate();

      function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture( generateSprite() ), blending: THREE.AdditiveBlending } );

        for ( var i = 0; i < 100; i++ ) {

          particle = new THREE.Particle( material );

          initParticle( particle, i );

          scene.addObject( particle );
        }

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.sortElements = false;
        container.appendChild( renderer.domElement );

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild( stats.domElement );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mousedown', onMouseDown, false );
        document.addEventListener( 'mouseup', onMouseUp, false );
      }

      function onMouseDown (event)
      {
        press = true;
      }

      function onMouseUp ()
      {
        press = false;
      }

      function generateSprite() {

        var canvas = document.createElement( 'canvas' );
        canvas.width = 16;
        canvas.height = 16;

        var context = canvas.getContext( '2d' );
        var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
        gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
        gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
        gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
        gradient.addColorStop( 1, 'rgba(0,0,0,1)' );

        context.fillStyle = gradient;
        context.fillRect( 0, 0, canvas.width, canvas.height );

        return canvas;

      }

      function initParticle( particle, index ) {

        var particle = this instanceof THREE.Particle ? this : particle;
        var index = index !== undefined ? index : 0;

        particle.position.x = Math.random() * 1000 - 500;
        particle.position.y = Math.random() * 1000 - 500;
        particle.position.z = Math.random() * 1000 - 500;
        particle.scale.x = particle.scale.y = Math.random() * 3 + 1;

      }

      //

      function onDocumentMouseMove( event ) {
        mouseX = event.clientX - centerx;
        mouseY = event.clientY - centery;
      }

      //

      function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

      }

      function render() {

        TWEEN.update();
        if (press){
          camera.position.x += ( mouseX - camera.position.x ) * 0.05;
          camera.position.z += ( mouseY - camera.position.y ) * 0.05;
          //camera.target.position.z = camera.position.z + 5000;
        }
        renderer.render( scene, camera );

    }
</script>
</body>
</html>